<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('预览代码')"/>
    <link rel="stylesheet" href="/admin/js/prism.css">
<!--    <link rel="stylesheet" href="/admin/js/prism-Funky.css">-->
    <style>
        #ul{

        }
    </style>
</head>
<body class="pear-container">
<div class="layui-tab layui-tab-brief" lay-filter="edit-filter">
    <div class="layui-tab layui-tab-brief" lay-filter="layui-tab">
        <ul class="layui-tab-title" id="ul">

        </ul>
        <div class="layui-tab-content" id="content">

        </div>
    </div>

    <th:block th:include="include :: footer"/>
    <script src="/admin/js/prism.js"></script>
    <script type="text/javascript" th:inline="javascript">
        let List = [[${preview}]];
        layui.use(['table', 'code', 'http', 'common','element'], function () {
            let http = layui.http;
            let common = layui.common;
            let element = layui.element;
            let code = layui.code;
            console.log(List)
            let li = ``
            let item = ``
            List.forEach((value, index, arr) => {
                let fileName = value.fileName
                // 文件名
                fileName = fileName.substring(fileName.lastIndexOf("/") + 1, fileName.length).replace(/\.vm/g, "");

                //文件后缀
                let ext = common.getStrExt(fileName)
                li += `<li class="${index === 0 ? 'layui-this' : ''} ">${fileName}</li>`
                value = value.content.replace(/</g, "&lt;");
                value = value.replace(/>/g, "&gt;");
                item += `<div class="layui-tab-item ${index === 0 ? 'layui-show' : ''}"> <pre class="layui-code code-demo" lay-options="{lang:'${ext}'}" >${value}</pre></div>`
            })

            $("#ul").html(li)
            $("#content").html(item)
            element.render('tab', 'layui-tab');
            layui.code({
                elem: '.code-demo',
                header: true,
                encode:false,
                theme: "dark",
                langMarker: true,
                codeRender: function(code, opts){
                    return Prism.highlight(code,Prism.languages[opts.lang],opts.lang);
                }
            });
        });
    </script>
</div>

</body>
</html>